<template>
    <div class="editType" ref="editType" >
        <el-dialog width="80%" @close="dialogClose" class="pub_dialog" :visible="visible" :destroy-on-close="true"
            >
            <div class="table—nav">
                <div class="first" :style="curStyle('first', curLength>0, activeName)">1.选择商品分类</div>
                <div class="scond" :style="curStyle('second', curLength>1,activeName)">2.编辑商品信息</div>
                <div class="third" :style="curStyle('third', curLength>2,activeName)">3.编辑商品详情</div>
            </div>

            <!-- 商品分类 -->
            <One :activeName="activeName" :resultsText="resultsText" @next="next" v-show="activeName === 'first'"/>

            <!-- 商品信息 -->
            <Two :activeName="activeName" :resultsText="resultsText" @back="back" @next="next" v-show="activeName === 'second'"/>

            <!-- 商品详情 -->
            <Third class="third-child" v-show="activeName === 'third'"  @back="back" @next="next"/>

        </el-dialog>

        <span v-html="dialogStyle"></span>
    </div>
</template>

<script>
import UploadDialog from '@/views/substance/uploadDialog'
import { getList, addList } from "@/api/agri-product/goodsList";
import One from './one'
import Two from './two'
import Third from './third'
export default {
    name: 'addDialog',
    props: ['visible'],
    components: {
        One,
        Two,
        Third,
        UploadDialog
    },
    data () {
        return {
            dialogStyle: `
                <style>
                    .editType .pub_dialog .el-dialog {
                        margin: 0 auto !important;
                        height: 90%;
                        overflow: hidden;
                    }
                    .editType .pub_dialog .el-dialog__body {
                        margin: 0 auto !important;
                        height: 90%;
                        overflow: hidden;
                         position: absolute;
                        left: 0;
                        top: 54px;
                        bottom: 0;
                        right: 0;
                        padding: 0;
                        z-index: 1;
                        overflow: hidden;
                        overflow-y: auto;
                        padding: 0 20px;
                    }
                </style>
            `,
            activeName: 'first',
            curLength: 0,
            resultsText: {
                oneId: '',
                oneName: '',
                twoId: '',
                twoName: '',
                threeId: '',
                threeName: ''
            },
            editForm: {},
        }
    },
    created () {
        this.getList()
    },
    methods: {
        curStyle (type, status) {
            if (status) {
                return 'background: #ff9979; color: #fff;'
            }
            console.log(this.activeName === type, status)
            return this.activeName === type ? 'background: #ff551f; color: #fff;' : 'background: #ebebeb; color: #333;'
        },
        //关闭弹窗
        dialogClose () {
            this.$emit("cancel");
        },
        getList() {
            getList(1, 999).then(res => {
                let result = res.data.data;
                this.gserviceCata = result.records;
            })
        },
        //选择一级分类
        selectCate1 (item) {
            this.oneId = item.id;
            this.oneName = item.name;
            this.childTwoArr = item.children;
            
            this.twoId = '';
            this.twoName = '';
            this.childThreeArr = [];
            this.threeId = '';
            this.threeName = ''

        },
        selectCate2 (item) {
            this.twoId = item.id;
            this.twoName = item.name;
            this.childThreeArr = item.children;

            this.threeId = '';
            this.threeName = '';
        },
        selectCate3 (item) {
            this.threeId = item.id;
            this.threeName = item.name;
        },
        // 下一步
        next (status, data) {
            if (status === 'second') {
                this.activeName = 'second';
                this.resultsText = data;
                // 分类id
                console.log(data, 'data')
                this.editForm.categoryIds = data.categoryIds;
                this.editForm.categoryId = data.categoryId;

            } else if (status === 'third') {
                this.activeName = 'third';

                this.editForm = {...this.editForm, ...data};
                console.log(this.editForm, '第二部')
            } else if (status === 'submit') { //提交数据发布
                let newData = JSON.parse(JSON.stringify(data));
        
                //处理图片格式
                newData.imageDetail = newData.imageDetail.join(',')

                this.editForm = {...this.editForm, ...newData};

                // 处理扩展属性数据格式
                let extAttrList = []
                this.editForm.extAttrList.length && this.editForm.extAttrList.forEach(item => {
                    let attrs = {
                        attrId: item.attrId,
                        attrValueId: item.id
                    }
                    extAttrList.push(attrs)
                })  
                this.editForm.extAttrList = extAttrList;
                console.log(this.editForm, '(this.editForm')
                addList(this.editForm).then(res => {
                    this.$message({
                        type: 'success',
                        message: '商品发布成功'
                    })
                    this.$emit('cancel')
                }).catch(err  => {
                    this.$message({
                        type: 'info',
                        message: '商品发布失败'
                    })
                })
            }
        },
        //上一步
        back (name) {
            this.activeName = name;
            console.log(name)
        },
    },
    watch: {
        activeName (cur) {
            cur === 'second' && (this.curLength = 1)
            cur === 'third' && (this.curLength = 2)
        },
        visible () {
            this.activeName = 'first',
            this.curLength = 0;
        },
    }
}
</script>

<style scoped lang="scss">
.editType {
    height: 650px;
}
ul {
    padding-left: 0;
    margin: 0;
}
li {
    list-style: none;
    font-size: 12px;
}
.table tr td .cell {
    overflow-x: scroll !important;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .table—nav {
    display: flex;
    width: 100%;
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .table—nav>div {
      text-align: center;
      background: #ebebeb;
      color: #333;
      width: 30%;
  }
  .curStyle {
      background: #ff551f;
       color: #fff;
  }
  .afterStyle {
      background: #ebebeb;
       color: #333;
  }
  .first-child li {
      padding: 0 5px;
      cursor: pointer;
  }
  .first-child {
      padding: 5px;
        border: 1px #c2daf2 solid;
        background: #eff8ff;
        margin-top: 10px;
        color: #444;
  }
  .results_margin {
        margin-right: 5px;
        border: 1px #b1d2ff solid;
        line-height: 24px;
  }
  .first-child-one, .first-child-two, .first-child-three {
        padding: 5px;
        overflow: auto;
        background: #fff;
        width: 206px;
        height: 288px;
        display: inline-block;
  }
  .selected {
      background: #eff8ff !important;
        border: 1px #98bbd1 solid;
        color: #1c4d92;
  }
  .results_bottom {
        background: #fffbf2;
        border: 1px #fddbab solid;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        color: #3468ce;
        padding-left: 10px;
  }
  .pub_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
}
</style>